<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
</head>
<body>

<!--
    计算属性和侦听器
       问题:  模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
           解决方案:
               1. 自定义函数
                        自定义函数可能会被多次使用，每次调用都会重新执行函数体的内容，函数计算的结果无法复用，计算的效率降低
               2. 计算属性    缓存
                   2.1  缓存并不是永久有效  在参与运算的属性值改变时  计算属性的缓存失效  重新进行运算
-->
<div id="app">
    <p><input type="text" v-model="message"></p>
    <!--    翻转字符串-->
    <p>{{message.split('').reverse().join('')}}</p>
    <hr>
    <!--    调用自定义函数  实现字符串反转-->
    <p>{{reverseMsg()}}</p>
    <p>{{reverseMsg()}}</p>
    <p>{{reverseMsg()}}</p>
    <hr>
    <p>{{reverseMessage}}</p>
    <p>{{reverseMessage}}</p>
    <p>{{reverseMessage}}</p>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello'
        },
        methods: {
            reverseMsg() {
                console.log('--------------reverseMsg-----------------')
                let msg = this.message.split('').reverse().join('')
                return msg
            }
        },
        // 计算属性
        computed:{
            reverseMessage:function (){
                console.log('-----------reverseMessage-------------')
                let msg = this.message.split('').reverse().join('')
                return msg
            }
        }
    })
</script>

</body>
</html>
